<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <p>
      <input v-model="num" type="text" />
    </p>
    <div>
      <button v-copy="num">点我复制</button>
    </div> -->

    <div v-drag class="one"></div>
    <div v-drag class="two"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, Ref, ref } from "vue";

export default defineComponent({
  setup() {
    const num: Ref<string> = ref("");
    return {
      num,
    };
  },
  directives: {
    // copy
    // el  节点
    copy(el, { value }) {
      const fn = () => {
        // 1. 动态创建 textarea
        let textarea = document.createElement("textarea");
        // 设置为只读
        textarea.readOnly = true
        document.body.appendChild(textarea);
        textarea.style.position = "absolute"
        textarea.style.left = "9999px"
        // 2. 把value的值赋值给 textarea
        textarea.value = value;
        // 3. 自动选中里面的内容
        textarea.select();
        // 4. 监听交互
        let flag = document.execCommand("Copy");
        // 5. 删除textarea
        // 复制成功
        if (flag) {
          document.body.removeChild(textarea);
        }
      };
      el.addEventListener("click", fn);
    },
    // 
    // longPress() {

    // },
    // 拖拽
    drag(el, {}) {
      // 按下
      let left: number = 0
      let top: number = 0
      // 移动
      const move = (ev: any) => {
        let { clientX, clientY, offsetX, offsetY } = ev
        left = clientX - el.offsetLeft
        top = clientY - el.offsetTop
        // console.log('我移动了', ev)
        // console.log(ev.clientX, ev.clientY)
        el.style.top = clientY + 'px'
        el.style.left = clientX + 'px'
      }

      // 抬起
      const up = () => {
        console.log('我抬起了')
        document.removeEventListener("mousemove", move)
      }

      const down = (ev: any) => {
        // console.log(ev)
        // let { clientX, clientY, offsetX, offsetY } = ev
        // left = clientX - offsetX
        // top = clientY - offsetY

        // el.style.top = top + 'px'
        // el.style.left = left + 'px'


        document.addEventListener("mousemove", move);
        document.addEventListener("mouseup", up);
         
      }
      el.addEventListener("mousedown", down);
    }
  }
})
</script>

<style scoped>
/* * {
  position: absolute;
} */

.one {
  width: 100px;
  height: 100px;
  background: orange;
  position: absolute;
  left: 150px;
  top: 50px;
}

.two {
  width: 100px;
  height: 100px;
  background: skyblue;
  position: absolute;
  left: 250px;
  top: 150px;
}
</style>

